<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page import="com.xzcf.service.UserService" %>
<%@ page import="com.xzcf.entity.User" %>
<%@ page import="org.springframework.context.ApplicationContext" %>
<%@ page import="org.springframework.context.support.ClassPathXmlApplicationContext" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta charset="utf-8" />
	<title>Metronic | Data Tables - Advanced Tables</title>
	<script src="../style/js/SlideTrans.js"></script>
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="../style/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="../style/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
	<link href="../style/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="../style/css/main-back.css" rel="stylesheet" type="text/css"/>
	<link href="../style/css/style.css" rel="stylesheet" type="text/css"/>
	
	<!-- END GLOBAL MANDATORY STYLES -->
	<link href="../style/css/glyphicons.css" rel="stylesheet" />
	<link href="../style/css/halflings.css" rel="stylesheet" />
	<!-- END PAGE LEVEL STYLES -->
	<link rel="shortcut icon" href="../style/image/favicon.ico" />
	<style type="text/css">
	a{
	color:#999999;
	}
	
	</style>
	
	<script type="text/javascript" src="../style/js/select2.min.js"></script>
	<style type="text/css">
	</style>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  
  
  <body>
  	
  	<%
  		long end_time = ((Long)session.getAttribute("endTime")).longValue();
  		long current_time=System.currentTimeMillis();
  		long rest = end_time-current_time;
  	 %>
  	 <script type="text/javascript">
  	 
  	 	var second = <%= rest / 1000%>; 
		var toDays = function(){
			var s = second % 60; // 秒
		 	var mi = (second - s) / 60 % 60; // 分钟
		 	var h =  ((second - s) / 60 - mi ) / 60 % 24; // 小时
		 	var d =  (((second - s) / 60 - mi ) / 60 - h ) / 24 // 天
			return  d + "天" + h + "小时" + mi + "分钟" + s + "秒";
		}
		window.setInterval(function(){
		 second --;
		 if(second<0){
		 	second = 0;
		 	var d = document.getElementById("auctionBtn");
		 	for(var i=0;i<d.childNodes.length;i++)
            {
                if(d.childNodes[i].disabled!=null)
                {
                    d.childNodes[i].disabled = "disabled";
                }
            }
		 }
		 document.getElementById("restTime").innerHTML = toDays ();
		}, 1000);
  	 </script>
  	
  	<style type="text/css"> 
	.container, .container img{width:280px; height:200px;}
	.container img{border:0;vertical-align:top;}
	</style>
	
	<br />
  	<style type="text/css">
		.container ul, .container li{list-style:none;margin:0;padding:0;}
		
		.num{ position:absolute; right:5px; bottom:5px; font:12px/1.5 tahoma, arial; height:18px;}
		.num li{
			float: left;
			color: #d94b01;
			text-align: center;
			line-height: 16px;
			width: 16px;
			height: 16px;
			font-family: Arial;
			font-size: 11px;
			cursor: pointer;
			margin-left: 3px;
			border: 1px solid #f47500;
			background-color: #fcf2cf;
		}
		.num li.on{
			line-height: 18px;
			width: 18px;
			height: 18px;
			font-size: 14px;
			margin-top:-2px;
			background-color: #ff9415;
			font-weight: bold;
			color:#FFF;
		}
	</style>
	<table>
		<TR>
			<TD width="9%"><strong>物品名称</strong></TD>
			<TD width="26%">${item.name}</TD>
		</TR>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<TR>
			<TD width="9%"><strong>物品图片</strong></TD>
			<TD width="26%">
				<div class="container" id="idContainer2">
					<ul id="idSlider2">
						<c:forEach var="tmp" items="${imagePath}">
							<li><img src="${tmp}"/></li>
						</c:forEach>
					</ul>
					<ul class="num" id="idNum">
					</ul>
				</div>
			</TD>
		</TR>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<TD width="9%"><strong>新旧程度</strong></TD>
			<TD width="26%">${item.howOld}</TD>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<TD width="9%"><strong>当前价格</strong></TD>
			<TD width="26%">${item.floorPrice}&nbsp;元</TD>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<TD width="9%"><strong>加价幅度</strong></TD>
			<TD width="26%"><font style="color:red;margin-left:10px;">${item.rate}</font>&nbsp;元</TD>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<TD width="9%"><strong>剩余时间</strong></TD>
			<TD width="26%"><font id="restTime" style="color:red;margin-left:10px;"></font></TD>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<TD width="9%"><strong>结束时间</strong></TD>
			<TD width="26%"><font style="color:red;margin-left:10px;">${item.endTime}</font></TD>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<TD width="9%"><strong>物品描述</strong></TD>
			<TD width="26%"><p>${item.itemDesc}</p></TD>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		
	</table>
	<br>
	
	<script>
	
	var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length,
		st = new SlideTrans("idContainer2", "idSlider2", n, {
			onStart: function(){//设置按钮样式
				forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })
			}
		});
	for(var i = 1; i <= n; AddNum(i++)){};
	function AddNum(i){
		var num = $$("idNum").appendChild(document.createElement("li"));
		num.innerHTML = i--;
		num.onmouseover = function(){
			timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200);
		}
		num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); }
		nums[i] = num;
	}
	st.Run();
	
	
	$$("idAuto").onclick = function(){
		if(st.Auto){
			st.Auto = false; st.Stop(); this.value = "自动";
		}else{
			st.Auto = true; st.Run(); this.value = "停止";
		}
	}
	$$("idNext").onclick = function(){ st.Next(); }
	$$("idPre").onclick = function(){ st.Previous(); }
	$$("idTween").onchange = function(){
		switch (parseInt(this.value)){
			case 2 :
				st.Tween = Tween.Bounce.easeOut; break;
			case 1 :
				st.Tween = Tween.Back.easeOut; break;
			default :
				st.Tween = Tween.Quart.easeOut;
		}
	}
	
	</script>
  	
  
  </body>
</html>
